<template>
  <div>
    <SplashScreen v-if="showSplash" />
    <div v-else class="app-container">
      <van-nav-bar
        :title="$route.meta.title"
        v-show="$route.meta.isShowNav"
        @click-left="onClickLeft"
        :left-arrow="$route.meta.isShowBack"
        fixed
        placeholder
        style="height: 46px"
      />
      <div class="main-content">
        <router-view />
      </div>
      <tab-bar v-if="isShowTabbar"></tab-bar>
    </div>
  </div>
</template>

<script setup>
import TabBar from './components/topbar.vue'
import SplashScreen from './components/SplashScreen.vue'
import { useRoute } from 'vue-router'
import { ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const route = useRoute()
const isShowTabbar = ref(true)
const showSplash = ref(true)

const router = useRouter()
const onClickLeft = () => {
  if (history.length > 1) {
    router.back()
  } else {
    router.push({ name: 'home' })
  }
}

// 监听路由中的isTab是否为true，如果为true，展示底部TabBar
watch(
  () => route.meta,
  val => {
    isShowTabbar.value = val.isTab
  }
)

onMounted(() => {
  // 只在首次加载或刷新时显示启动页
  setTimeout(() => {
    showSplash.value = false
  }, 3800)
})

</script>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.main-content {
  flex: 1 1 auto;
  overflow-y: auto;
}
#app {
  color: #2c3e50;
  line-height: 24px;
  --van-nav-bar-background: #7062c1;
  --van-nav-bar-title-text-color: #fff;
  --van-nav-bar-icon-color: #fff;
  
  /* Toast 样式 */
  --van-toast-background: rgba(0, 0, 0, 0.85);
  --van-toast-text-color: #ffffff;
  --van-toast-loading-icon-color: #ffffff;
  --van-toast-border-radius: 12px;
  --van-toast-min-width: 120px;
  --van-toast-max-width: 80%;
  --van-toast-padding: 16px 20px;
  --van-toast-font-size: 15px;
  --van-toast-line-height: 22px;
  --van-toast-icon-size: 40px;
  --van-toast-icon-margin-bottom: 10px;
  --van-toast-z-index: 2000;
  --van-toast-word-break: break-all;
  --van-toast-word-wrap: break-word;
  --van-toast-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  /* Dialog 样式 */
  --van-dialog-width: 320px;
  --van-dialog-border-radius: 16px;
  --van-dialog-header-font-weight: 600;
  --van-dialog-header-padding-top: 20px;
  --van-dialog-header-padding-bottom: 12px;
  --van-dialog-message-padding: 16px 20px;
  --van-dialog-message-font-size: 15px;
  --van-dialog-message-line-height: 22px;
  --van-dialog-message-max-height: 60vh;
  --van-dialog-confirm-button-text-color: #7062c1;
  --van-dialog-cancel-button-text-color: #666;
  --van-dialog-button-font-size: 16px;
  --van-dialog-button-height: 48px;
}

/* 自定义 Toast 样式 */
:deep(.van-toast) {
  background: rgba(0, 0, 0, 0.85) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  padding: 16px 20px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  min-width: 120px !important;
  max-width: 80% !important;
  word-break: break-all !important;
  word-wrap: break-word !important;
  z-index: 2000 !important;
}

:deep(.van-toast__text) {
  color: #ffffff !important;
  font-size: 15px !important;
  line-height: 22px !important;
  text-align: center !important;
}

:deep(.van-toast__loading) {
  color: #ffffff !important;
}

:deep(.van-toast__icon) {
  font-size: 40px !important;
  margin-bottom: 10px !important;
}

html, body, #app {
  height: 100%;
  margin: 0;
  padding: 0;
  position: static !important;
  overflow: hidden !important;
}
</style>
